<template>
  <div class="modal-form">
    <div class="modal-search">
      <el-form :inline="true" :model="form" size="mini">
        <el-form-item label="任务类型">
          <portalSelectTree
            :key="refreshSelectTree"
            :data="fiterTreeData"
            width="200"
            :value="value"
            :props="props"
            size="mini"
            filterable
            placeholder="请选择任务类型"
            :disabled="disabledStatus"
            @change="treeChange"
          />
        </el-form-item>
        <el-form-item label="任务关系">
          <el-select v-model="form.taskRelation" placeholder="请选择用户关系" :disabled="disabledStatus" @change="taskRelationChange">
            <el-option
              v-for="item in mapData"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="是否系统默认配置">
          <el-switch v-model="form.isDefault" active-value="1" inactive-value="0"></el-switch>
        </el-form-item> -->

      </el-form>
    </div>

    <div class="table-wrapper">
      <el-table :data="tableData" border>
        <el-table-column
          v-for="item in columnData"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          align="center"
          :width="item.width"
        >
          <template slot-scope="{row}">
            <template v-if="item.prop === 'noticeType'">
              {{ transLateAction(row[item.prop]) }}
            </template>
            <template v-else>
              <!-- {{row[item.prop]}} -->
              <template v-if="item.prop === 'isRemind'">
                <el-switch
                  v-model="row[item.prop]"
                  active-value="1"
                  inactive-value="0"
                  size="mini"
                  :disabled="formDisabled"
                />
              </template>
              <template v-if="item.prop === 'noticeTemplate'">
                <el-input
                  v-model="row[item.prop]"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  :disabled="formDisabled"
                />
              </template>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import portalSelectTree from '@/components/portalSelectTree'
import { getTaskTreeList } from '@/api/portalTaskUi/taskAction'
import { getDictType } from '@/api/portalTaskUi/taskList'
import { getListByConfigId } from '@/api/portalTaskUi/taskNotice'
import { getTreeData } from '@/util/util'
// import { getTenantId, getTypeCodeList, getDictType } from "@/api/portalTaskUi/taskList";
export default {
  name: 'ModalForm',
  components: {
    portalSelectTree
  },
  inject: ['root'],
  data() {
    return {
      form: {
        taskRelation: '',
        isDefault: '0'
      },
      tableData: [],
      columnData: [
        { prop: 'noticeType', label: '操作类型', width: 220 },
        { prop: 'isRemind', label: '是否通知', width: 120 },
        {
          label: '通知模板',
          prop: 'noticeTemplate'
        }
      ],
      value: [],
      props: {
        label: 'nodeName'
      },
      currentId: '',
      fiterTreeData: [],
      mapData: [],
      actionTypeData: [], // 操作类型的字典
      getDictTypeData: [], // 设置类型字典
      refreshSelectTree: 1, // 选择树的key
      disabledStatus: false, // 是否禁用任务类型和任务关系
      formDisabled: false // 表单是否禁用
    }
  },
  async created() {
    // this.getDictTypeData = await this.getDictTypeFun("task_relation"); // 设置类型字典
    // this.actionTypeData = await this.getDictTypeFun("notice_type"); // 操作类型的字典
    // console.log(this.actionTypeData);
    // this.mapData = getDictTypeData;
    // this.form.taskRelation = this.mapData && this.mapData.length > 0 ? this.mapData[0].value : ""; // 设置任务关系的默认值
    // this.currentId = this.root.currentId;
    // let params = {
    //   tenantId: this.currentId
    // };
    // let treeData = await this.getTaskTreeListFun(params); // 获取树的数据
    // this.treeData = treeData;
    // this.fiterTreeData = treeData;
    // this.value = [this.treeData[0]];
    // await this.getListByConfigIdFun();

  },
  methods: {
    // 设置弹窗数据
    async setModelFormData(params) {
      console.log(params)
      if (this.getDictTypeData.length === 0) {
        this.getDictTypeData = await this.getDictTypeFun('task_relation') // 设置类型字典
      }
      if (this.actionTypeData.length === 0) {
        this.actionTypeData = await this.getDictTypeFun('notice_type') // 操作类型的字典
      }
      this.mapData = this.getDictTypeData
      this.currentId = this.root.currentId
      const treeData = await this.getTaskTreeListFun(params) // 获取树的数据
      this.treeData = treeData
      this.fiterTreeData = treeData
      if (params.status === 'update') {
        console.log(this.treeData)
        this.value = [getTreeData(this.treeData, params.nodeId, 'nodeId')]
        this.form.taskRelation = params.noticeUsers || ''
        this.disabledStatus = true
        this.formDisabled = false
      } else if (params.status === 'add') {
        // this.value = this.treeData.filter(v => v.nodeName === params.nodeName) || [];
        this.value = [getTreeData(this.treeData, params.nodeId, 'nodeId')]
        // this.form.taskRelation = this.mapData && this.mapData.length > 0 ? this.mapData[0].value : ""; // 设置任务关系的默认值
        this.form.taskRelation = params.noticeUsers || this.mapData[0].value || ''
        this.disabledStatus = false
        this.formDisabled = false
      } else if (params.status === 'view') {
        this.value = [getTreeData(this.treeData, params.nodeId, 'nodeId')]
        // this.form.taskRelation = this.mapData && this.mapData.length > 0 ? this.mapData[0].value : ""; // 设置任务关系的默认值
        this.form.taskRelation = params.noticeUsers || this.mapData[0].value || ''
        this.disabledStatus = true
        this.formDisabled = true
      }
      this.refreshSelectTree++ // 刷新选择树
      // console.log(this.root.usersId);
      await this.getListByConfigIdFun()
    },
    // 翻译操作类型
    transLateAction(value) {
      // return
      const target = this.actionTypeData.find(v => v.value === value) || {}
      return target.label || '暂无字典对应'
    },
    // 获取任务类型和任务关系的数据
    getListByConfigIdFun() {
      const configParams = {
        isSystemConfig: this.root.isSystemConfig,
        noticeUsers: this.form.taskRelation,
        taskTypeId: this.value[0] ? this.value[0].nodeId : '',
        tenantId: this.root.currentId
      }
      return new Promise((resolve, reject) => {
        getListByConfigId(configParams).then(res => {
          this.tableData = res.data.data
          resolve(res.data.data)
        })
      })
    },
    // 任务类型树改变
    async treeChange(value) {
      this.value = value
      await this.getListByConfigIdFun()
    },
    // 任务类型改变
    async taskRelationChange() {
      await this.getListByConfigIdFun()
    },
    // modal树的数据
    getTaskTreeListFun(params) {
      return new Promise((resolve, reject) => {
        getTaskTreeList(params).then(res => {
        // console.log(res);
          if (res.data.code === 0) {
            // this.treeData = res.data.data;
            resolve(res.data.data)
            // this.value = [this.fiterTreeData[0]]; // 设置树的默认值
          }
        })
      })
    },
    // 获取类型的字典
    getDictTypeFun(params) {
      // 字典名称
      return new Promise(resolve => {
        getDictType(params).then(res => {
          resolve(res.data.data)
        })
      })
    }
  }
}
</script>

<style>
.modal-form{
  height:500px
}
</style>
